<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>定义回复内容</title>
</head>
<body>
<!-- /.box-header -->
<section class="content">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">选择原始ID</li>
            <li>输入原始ID</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="box-body">
                    <div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="example1_filter" class="dataTables_length">
                                <label>
                                    <input type="search" id="keyword" class="form-control input-sm" placeholder="昵称丶原始ID丶公司" aria-controls="example1">
                                </label>
                                <button type="button" id="search" class="btn btn-flat margin" style="background: #18bc9c;color: #ffffff;">搜索</button>
                                <div class="form-group">
                                    <label>分类筛选：</label>
                                    <select id="select" class="form-control select2" style="width: 120px;">
                                        <option value="" selected="selected">一级分类</option>
                                        {volist name="category" id="v"}
                                        <option value="{$v.id}">{$v.categoryname}</option>
                                        {/volist}
                                    </select>
                                    <select id="select2" class="form-control select2" style="width: 120px;">
                                        <option selected="selected">二级分类</option>
                                    </select>
                                </div>
                                <button type="button" id="btn_save2" class="btn btn-flat bg-navy margin">保存</button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
                                <thead>
                                <tr role="row">
                                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 60px;">
                                        反选<input id="allchecked" type="checkbox" style="margin-left: 10px">
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 190px;">头像</th>
                                    <th class="sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 297px;">账号昵称</th>
                                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 322px;">原始ID</th>
                                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 257px;">appId</th>
                                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 190px">一级分类</th>
                                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 190px;">二级分类</th>
                                </tr>
                                </thead>
                                <tbody id="tb">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="box-body">
                    <form role="form">
                        <div class="form-group col-md-7" >
                            <label>微信原始ID<span style="color: #f71752">(ghid)</span></label>
                            <textarea class="form-control" rows="9" id="ghids" placeholder="ghid...">{$data.ghid_list}</textarea>
                        </div>
                        <div class="form-group col-md-7" >
                            <div style="color: #f71752">每个ghid请用英文逗号（,）分隔</div>
                        </div>
                        <input type="hidden" id="mid" value="{$mid}">
                        <div class="row">
                            <div class="col-sm-12">
                                <button type="button" id="btn_save" class="btn bg-navy btn-flat margin">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- /.box-body -->
</section>
</body>
<script>
    layui.use('element', function(){
        var element = layui.element;
    });
    var _keyword = '';
    var _category = '';
    var _category2 = '';
    $(function(){
        getlist(_keyword,_category,_category2);//初始化数据
        $('#search').click(function(){
            table.destroy();
            var keyword = $('#keyword').val();
            getlist(keyword,_category,_category2)
        });
        //反选
        $('#allchecked').click(function(){
            $("[name = checkboxed]:checkbox").each(function () {
                $(this).prop("checked", !$(this).prop("checked"));
            });
        });
        //获取二级分类
        $('#select').change(function(){
            var _id=  $("#select").val();
            $.ajax({
                type: 'post',
                cache: false,
                url: '{:url("admin/Tencent/getCategoryList")}',
                data: {id: _id},
                success: function(data) {
                    if (data.code == "0") {
                        $("#select2 option").remove();
                        var html = '<option value="">请选择...</option>';
                        $("#select2").append(html);
                        $.each(data.info, function (index, item) {
                            var html = '<option value="' + item.id + '">' + item.categoryname + '</option>';
                            $("#select2").append(html);
                        });
                        table.destroy();
                        getlist(_keyword,_id,'');
                    }
                }
            });
        });
        $('#select2').change(function(){
            var _id2=  $("#select2").val();
            table.destroy();
            getlist(_keyword,'',_id2);
        });
        $('#btn_save2').click(function(){
            var chk_value =[];
            $('input[name="checkboxed"]:checked').each(function(){
                chk_value.push($(this).val());
            });
            var ghidstr = chk_value.join(',');
            var _id = $('#mid').val();
            $.ajax({
                type: 'post',
                cache: false,
                url:'{:url("admin/wechatmenu/doSaveGhidsList")}',
                data: {ghids:ghidstr,ids:_id},
                success: function(data) {
                    if(data.code == 0){
                        layerAlert('设置成功',function(){
                            layerParentClose();
                            parent.window.location.reload();
                        });
                    }
                }
            })
        })
        $('#btn_save').click(function(){
            var _ghids = $('#ghids').val();
            var _id = $('#mid').val();
            $.ajax({
                type: 'post',
                cache: false,
                url:'{:url("admin/wechatmenu/doSaveGhids")}',
                data: {ghids:_ghids,ids:_id},
                success: function(data) {
                    if(data.code == 0){
                        layerAlert('设置成功',function(){
                            layerParentClose();
                            parent.window.location.reload();
                        });
                    }
                }
            })
        })
    })
    function getlist(_keyword,_category,_category2)
    {
        $.ajax({
            type: 'post', cache: false,
            url:'{:url("admin/Wechatmenu/getTencentList")}',
            data: {keyword:_keyword,category:_category,category2:_category2},
            success: function(data) {
                if(data.code=="0")
                {
                    $("#tb tr").remove();
                    $.each(data.info,function(index,item){
                        var html='<tr role="row" class="odd" id="tr_'+item.id+'">';
                        html+='<td style="vertical-align: middle;"><input name="checkboxed" value="'+item.ghid+'" type="checkbox" style="margin-left: 10px"></td>';
                        html+='<td style="vertical-align: middle;"><img style="width: 45px;height: 45px;" src="'+item.pic+'" alt=""></td>';
                        html+='<td style="vertical-align: middle;">'+item.name+'</td>';
                        html+='<td style="vertical-align: middle;">'+item.ghid+'<i ghid="'+item.ghid+'" class="fa fa-qrcode qrcode"></i></td>';
                        html+='<td style="vertical-align: middle;">'+item.appid+'</td>';
                        html+='<td style="vertical-align: middle;">'+item.category+'</td>';
                        html+='<td style="vertical-align: middle;">'+item.category2+'</td>';
                        html+='</tr>';
                        $("#tb").append(html);
                    });
                    if(_category2 != ''){
                        $("[name = checkboxed]:checkbox").prop("checked","checked");
                    }
                    $('.fa-qrcode').bind("click",function(){
                        var _qrcode = $(this).attr('ghid');
                        url = 'https://open.weixin.qq.com/qr/code?username='+_qrcode;
                        layerWindow('二维码',url,'35%','60%')
                    })
                    table = $('#example1').DataTable({
                        "paging": false,
                        "lengthChange": false,
                        "lengthMenu": [[10],[10]],
                        "searching": false,
                        "ordering": false,
                        "info": true,
                        "language": {
                            "info": "展示第 <span style='color: red;'>_START_</span> 到 <span style='color: red;'>_END_</span> 个 共 <span style='color: red;'>_TOTAL_</span> 个公众号",
                            "paginate": {
                                "previous": "上一页",
                                "next": "下一页"
                            }
                        },
                        "autoWidth": true,
                    });
                }
            },
            error: function() {
                alert("发生系统错误,请与管理员联系！");
            }
        });
    }
</script>
</html>